import React, {Component} from 'react';
import {StyleSheet,Text,View,Modal,TouchableOpacity} from 'react-native';
import './global';
  
  
 export default class WhoModal extends Component {
  
    render() {
        return (
            <Modal style={styles.container}
                transparent={true}
                visible={this.props.visible}
                onRequestClose={() => {
                    this.props.cancel()
                }}>
                <TouchableOpacity style={{flex: 1}} onPress={() => {
                    this.props.cancel()
                }}>
                    <View style={styles.dialogContainer}>
                        <View style={styles.innerContainer}>
                            <View style={styles.contentContainer}>
                                <Text style={styles.dialogContentTextStyle}>{this.props.content}</Text>
                            </View>


                            <View style={styles.btnContainer}>
                                <TouchableOpacity style={styles.dialogCancelButton} onPress={() => {
                                    this.props.confirm()
                                }}>
                                    <Text style={styles.hidemodalTxt}>所有人</Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.dialogCancelButton} onPress={() => {
                                    this.props.confirm()
                                }}>
                                    <Text style={styles.hidemodalTxt}>仅限好友</Text>
                                </TouchableOpacity>
                                
                                
                            </View>

                        </View>
                    </View>
                </TouchableOpacity>
            </Modal>
        );
    }
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    dialogContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.6)'
    },
  
   innerContainer: {
        borderRadius: p2d(10),
        alignItems: 'center',
        backgroundColor: '#fff',
        width: p2d(400),
        height:p2d(230)
    },
    contentContainer: {
        flex: 1,
        width: p2d(400),
        height: p2d(60),
        position: "absolute",
        top:p2d(0),
        borderTopColor: '#cccccc',
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth:p2d(1)
    },
    dialogContentTextStyle: {
        fontSize:p2d(25),
        color: '#333333',
        marginLeft:p2d(25),
        marginRight:p2d(25),
    },
    btnContainer: {
        flex: 1,
        width:p2d(400),
        height:p2d(170),
        borderTopWidth:p2d(1),
        position: "absolute",
        bottom:p2d(0),
        borderTopColor: '#cccccc',
        alignItems: 'center'
    },
    dialogConfirmButton: {
        flex: 1,
        alignItems: 'center',
        borderLeftColor: '#cccccc',
        top:p2d(10),
    },
    dialogCancelButton: {
        flex: 1,
        alignItems: 'center',
        height:p2d(20),
        width:p2d(400),
        borderBottomWidth:p2d(1),
    },
    hidemodalTxt: {
        marginTop:p2d(25),
        textAlign: 'center',
        fontSize: p2d(22),
        color: '#4fb7f1'
    },

});